<template>
    <div class="file-box">
      <div v-if="editStash">
        <div plain class="btn">
          <label for="updatedFilesInpt" class="labelstyle" :title="isIE10">
            <a-icon class="mr10 mt5" type="upload"></a-icon>点击上传
            <input class="input" type="file" id="updatedFilesInpt" @change="updatedFile($event)">
          </label>
        </div>
        <span class="ml10 text-gray" v-html="placeholder"></span>
      </div>
      <div v-for="(item, idx) in fileList" :key="idx" class="a-box">
        <a v-if="item.id" :href="'/api/financing/file/' + item.id" download>{{itme.fileName}}</a>
        <span v-else>{{item.fileName}}</span>
        <span>
          <a-icon v-if="editStash" @click="delFile(idx)" class="ml10" type="close"></a-icon>
        </span>
      </div>
    </div>
</template>
<script>
import { postFile } from '../assets/api/fileController'
export default {
  name: 'FileUp',
  props: ['params'],
  data () {
    return {
      placeHolder: this.params.placeHolder,
      fileType: this.params.fileType
    }
  },
  computed: {
    fileList () {
      return this.params.fileList
    },
    editStash () {
      return this.params.editStash
    }
  },
  methods: {
    async updatedFile (e) {
      var files = new FormData()
      files.append('files', e.target.files[0])
      const res = await postFile({ files: files, fileType: this.fileType })
      if (res.data && res.data[0]) {
        const data = res.data[0]
        this.fileList.push(data)
        this.params.changeData && this.params.changeData(this.fileList)
        this.$message.success('上传成功')
      } else {
        this.$message.error(res.error.msg)
      }
      e.target.value = ''
    },
    delFile (index) {
      this.fileList.splice(index, 1)
      this.params.changeData(this.fileList)
    }
  }
}
</script>
<style lang="less" scoped>
.file-box {
  padding: 0px 0;
  .btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 32px;
    padding: 0 15px;
    line-height: 30px;
  }
  .labelstyle {
    display: block;
    line-height: 30px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    .antion {
      vertical-align: -0.125em;
    }
  }
  .input {
    display: block;
    position: absolute;
    height: 100%;
    top: 10px;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
  }
  .a-box {
    margin-top: 9px;
    line-height: 20px;
  }
}
</style>
